<script setup lang=ts>
import router from '@/router'
import SystemCell from '@/views/Message/components/SystemCell.vue'
import MessageCell from '@/views/Message/components/MessageCell.vue'
import type { MessageData } from '@/types/Message'
import { ref } from 'vue'
const messageDatas = ref<MessageData[]>([{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '1',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '2',
  time: '2023年11月30日',
  isFollow: false
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '3',
  time: '2023年11月30日',
  isFollow: false
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '4',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '5',
  time: '2023年11月30日',
  isFollow: false
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '6',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '7',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '8',
  time: '2023年11月30日',
  isFollow: false
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '9',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '10',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '11',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '12',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '13',
  time: '2023年11月30日',
  isFollow: true
},
{
  userName: '安然田园',
  userAvater: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201407%2F01%2F20140701213706_XcfaZ.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1708836581&t=163e702744fb898b947b37aaddf143dd',
  userId: '14',
  time: '2023年11月30日',
  isFollow: true
},
])

const onFollow = (message: MessageData) => {
  console.log(message.userName)
  message.isFollow = !message.isFollow
}
const toUser = (message: MessageData) => {
  console.log(message.userId)
}
const onSystemMessage = () => {
  console.log('系统消息')
}
const isLoading = ref(false)

const onRefresh = () => {
  setTimeout(() => {
    isLoading.value = false
  }, 3000)
}
const loading = ref(false)
const finished = ref(false)
const onLoad = () =>{
  console.log('onLoad')
  setTimeout(() => {
    loading.value = false
    messageDatas.value = [...messageDatas.value,...messageDatas.value]
    if(messageDatas.value.length > 40){
      finished.value = true
    }
  }, 3000)
}
</script>

<template>
  <!-- nav -->
  <van-nav-bar class="nav-bar" left-arrow @click-left="router.go(-1)" safe-area-inset-top>
    <template v-slot:left>
      <span class="iconfont icon-fanhui back"></span>
    </template>
    <template v-slot:title>
      <div class="my-title">
        <span class="title-txt">全部消息</span>
        <span class="iconfont icon-sanjiaoxing down-arrow"></span>
      </div>
    </template>
  </van-nav-bar>

  <van-list
  v-model:loading="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad">
    <!-- 下拉加载 -->
    <van-pull-refresh 
    v-model="isLoading" 
    success-text="刷新成功" 
    @refresh="onRefresh">
      <!-- 系统消息 -->
      <SystemCell @on-system-message="onSystemMessage" />
      <!-- 消息 -->
      <MessageCell 
      v-for="item in messageDatas" :key="item.userId" 
      :message="item" 
      @on-follow="onFollow"
      @to-user="toUser"/>
    </van-pull-refresh>

  </van-list>
 
  <!-- 底部安全区 -->
  <div class="van-safe-area-bottom" />
</template>

<style lang="scss" scoped>
.back {
  color: #fff;
  font-size: 5vw;
  background-color: transparent;
}

.nav-bar {
  height: 12vw;
  background-color: transparent;
  border-bottom: none;
  /* 去除底部边框 */
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.van-hairline--bottom:after {
  border-bottom-width: 0;
}

.my-title {
  background-color: transparent;
}

.title-txt {
  color: #fff;
  font-size: 5vw;
  background-color: transparent;
}

.down-arrow {
  margin-left: 2vw;
  color: #fff;
  font-size: 3vw;
}
</style>